<template>
  <div>
      <div class="zd">
	    <!--头部-->
	    <div class="zdtp">
          <div class="zdtp-zi">
			<h2>Contact</h2>
			<li class="home">Home.Contact</li>
			<div class="zfx"></div>
		  </div>
	    </div>
		<!--主体-->
		<div class="zdzt">
            <div class="zdzt-tb">
				<span class="con">Contact With Us Now</span>
				<h3 class="write">Write a Message</h3>
			</div>
			<div class="zdzt-in">
				<input type="text" placeholder="First Name" class="inputs">
				<input type="text" placeholder="Last Name" class="inputs">
				<input type="text" placeholder="Email Address" class="inputs">
				<input type="text" placeholder="Phone Number" class="inputs">
				<input type="text" placeholder="Write Message" id="inputs-d">
			</div>
			<div class="zdzt-zh">
				<button class="but">Submit message</button>
				<div class="xk"></div>
			</div>
		</div>
		<!--第二-->
		<div class="zddr">
             <div class="zddr-one">
				 <div class="zddr-bt">
					 <i class="t-z"></i>
				 </div>
				 <h4 class="dr-d">About Krowd</h4>
				 <p class="ds-s">Morbi ut tellus ac leo molestie luctus nec 
					<br>
                    vehicula sed justo onec tempor rhoncus 
					<br>
                    volutpat ras lorem.
				</p>
			 </div>
			   <div class="zddr-one" id="two">
				 <div class="zddr-bt">
					 <i class="t-z"></i>
				 </div>
				 <h4 class="dr-d">About Krowd</h4>
				 <p class="ds-s">
					 66 Road Broklyn Street, 600 New York.
					 <br>
                     United States of America
                     <br>
					 P.O Box 0000	
			    </p>
			 </div>
			   <div class="zddr-one" id="san">
				 <div class="zddr-bt">
					 <i class="t-z"></i>
				 </div>
				 <h4 class="dr-d">Our Address</h4>
				 <p class="ds-s">
					 needhelp@krowd.com
					 <br>
                     info@krowd.com
                     <br>
					 666 888 0000
				</p>
			 </div>
		</div>
		<!--最后-->
		<div class="zhyg">
			<div class="zhyg-s">
				<img src="https://www.google.cn/landing/cnexp/google-search.png">
				<h1 class="h1-bq">
				  <a href="#">maps.google.com.hk</a>
				</h1>
				<p class="p-wz">请收藏我们的网址</p>
			</div>
		</div>
		<!--底部-->
		<div class="footerl">翻译</div>
		<div class="footerl-zh">©2011 - ICP证合字B2-20070004号</div>
	</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='scss' scoped>
*{margin: 0;padding: 0;list-style: none;border: none;outline: none;}
.zd{width: 100%;
height: 1850px;}
.zdtp{width: 100%;
      height: 330px;
	  float: left;
	  background-image: url("../img/Contact/a1.jpg");
	  background-repeat: no-repeat;
	  .zdtp-zi{width: 1000px;
	           height: 330px;
			   float: left;
			   margin-left: 270px;
			   color: white;
			    h2{width: 200px;
			       height: 70px;
				   font-size: 40px;
				   margin-top: 130px;}
			    .home{width: 48px;
				      height: 26px;
					  margin-left: 890px;
					  margin-top: -60px;}
				.zfx{width: 37px;
				     height: 37px;
					 background-color: rgb(4, 235, 200);
					 margin-top: 126px;}
			   }
	  }
.zdzt{width: 100%;
      height: 850px;
	  float: left;
	  .zdzt-tb{width: 1200px;
	           height: 145px;
			   margin-top: 100px;
			  margin-left: 180px;
     .con{
		 width: 185px;
		 height: 100px;
		 color: #674df0;
		 margin-left: 40%;
		 font-size: 18px;
		 
	 }
	 .write{
		 font-size: 50px;
		 padding-top: 6px;
		 margin-left: 350px;
	 }
		}	 
	  .zdzt-in{
		 width: 770px;
		 height: 350px;
		 float: left;
		 margin-left: 420px;
		 .inputs{width: 370px;
		         height: 70px;
				 font-size: 17px;}
		 #inputs-d{width: 770px;
		           height: 140px;
				   font-size: 17px;
				   }
	  }
	  .zdzt-zh{width: 770px;
	           height: 70px;
			   float: left;
			   position: relative;
			   margin-left: 610px;
			   button{width: 260px;
			          height: 70px;
					  position: relative;
					  background-color: rgb(32, 226, 181);
					  cursor: pointer;
					  font-size: 20px;
					  }
			   .xk{width: 17px;
			       height: 17px;
				   position: absolute;
				   background-color: black;
				   margin-top: -70px;
				   margin-left: 243px;
				   z-index: 20;}
			   }
	}
.zddr{width: 100%;
      height: 360px;
	  float: left;
	  margin-top: -90px;
	  .zddr-one{width: 490px;
	            height: 360px;
				float: left;
				margin-left: 13px;
				background-color:#6f42c1;
	      .zddr-bt{width: 130px;
	               height: 130px;
			       position: relative;
		           border-radius: 80px;
				   margin-left: 30px;
			       background-color: #6610f2; 
			   .t-z{width: 90px;
			        height: 90px;
					position: absolute;
				    background-image: url("../img/Contact/a2.jpg");
			        background-repeat: no-repeat;
					z-index: 10;
					margin-left: 20px;
					margin-top: 22px;
					}
			   }
		  
		  .dr-d{width: 460px;
		        height: 28px;
				font-size: 30px;
				color: white;
				margin-left: 40px;
				margin-top: 30px;
				}
		  .ds-s{width: 460px;
		        height: 130px;
				color: white;
				font-size: 20px;
				margin-top: 40px;
				margin-left: 40px;
				}
		}
      #two{background-color: black;}
	  #san{background-color: rgb(4, 235, 200);}
	  }
.zhyg{width: 100%;
      height: 420px;
	  float: left;
	  .zhyg-s{width: 650px;
	          cursor: pointer;
	          height: 357px;
			  float: left;
			  border-radius: 50px;
			  border: 1px solid #ccc;
			  margin-left: 430px;
			  margin-top: 30px;
			  img{width: 560px;
			      height: 250px;
				  margin-left: 45px;
				  }
			  .h1-bq{width: 650px;
			         height: 28px;
					 text-align: center;			 
					a{font-size: 20px;
					  color: blue;
					  }
					}
			  .p-wz{width: 650px;
			        height: 19px;
				    font-size: 10px;
					text-align: center;
					margin-top: 30px;
			        }
			  }
	  }
.footerl{width: 100%;
        height: 20px;
		color: blue;
		text-align: center;
		cursor: pointer;
		}
.footerl-zh{width: 100%;
           height: 20px;
		   font-size: 10px;
		   float: left;
		   margin-top: 30px;
		   text-align: center;
		   }
</style>